<script setup lang="ts">
import { readUsingPost } from '@/api/messageController'
import { MessageType } from '@/constants/MessageType'
import { Avatar, Message, Typography } from '@arco-design/web-vue'
import dayjs from 'dayjs'
import { PropType, Ref, ref } from 'vue'
import TaskView from '@/components/tasks/TaskView.vue'
import { useRouter } from 'vue-router'
const props = defineProps({
  message: {
    type: Object as PropType<API.MessageVo>,
    required: true
  },
  num: Number
})
const emit = defineEmits(['confirm'])
const router = useRouter()
// 修改时间格式化方法
const formatTime = (message: API.MessageVo) => {
  // 如果是未读消息，显示创建时间
  if (message.status === 1) {
    return message.createAt ? dayjs(message.createAt).format('YYYY-MM-DD HH:mm') : ''
  }
  // 如果是已读消息，显示更新时间（阅读时间）
  return message.updateAt ? dayjs(message.updateAt).format('YYYY-MM-DD HH:mm') : ''
}

// 解析消息参数获取关联对象信息
const taskPreviewVisiable: Ref<boolean> = ref(false)
const taskPreviewId: Ref<number | null> = ref(null)
const projectPreviewVisiable: Ref<boolean> = ref(false)
const projectPreviewId: Ref<number | null> = ref(null)
const requirementPreviewVisiable: Ref<boolean> = ref(false)
const requirementPreviewId: Ref<number | null> = ref(null)
// 处理消息卡片点击
const handleCardClick = () => {
  if (!props.message) return

  const { ...payloadData } = props.message?.params
  console.log(payloadData)
  if (payloadData.payloadType === 'task') {
    taskPreviewVisiable.value = true
    taskPreviewId.value = payloadData.taskId as number
  }
  if (payloadData.payloadType === 'project') {
    projectPreviewVisiable.value = true
    projectPreviewId.value = payloadData.proId as number
    router.push(`/missions/projects/${payloadData.proId}`)
  }
  if (payloadData.payloadType === 'requirement') {
    requirementPreviewVisiable.value = true
    requirementPreviewId.value = payloadData.reqId as number
  }
  if (payloadData.payloadType === 'team') {
    router.push(`/team/info`)
  }
}

// 处理确认按钮点击
const handleConfirm = async (e: Event, messageId: number) => {
  e.stopPropagation() // 阻止事件冒泡
  //通知父组件
  emit('confirm', messageId)
}

// 获取消息类型
const getMessageType = (noticeType?: number) => {
  return noticeType === 0 ? 'system' : 'mention'
}
// 获取消息发送者
const getSender = (message?: API.MessageVo) => {
  if (message?.noticeType === 0) {
    return '系统'
  }
  return message?.sender?.name || message?.sender?.username
}
// 是否已读
const isUnRead = (status?: number) => {
  return status === 1
}
</script>

<template>
  <div class="message-card" :class="{ unread: message.status === 0 }" @click="handleCardClick">
    <div class="message-left">
      <div class="avatar-wrapper">
        <Avatar :size="32" :image-url="message.sender?.avatar" />
      </div>
      <span class="sender-name">{{ getSender(message) }}</span>
    </div>
    <div class="message-right">
      <div class="message-header">
        <div class="message-meta">
          <span class="message-type" :class="getMessageType(message.noticeType)">
            {{ message.noticeType === 0 ? '系统' : '@我' }}
          </span>
          <span class="message-category">{{ MessageType.getTypeText(message.type) }}</span>
          <span v-if="isUnRead(message.status)" class="unread-dot"></span>
        </div>
        <div class="message-time" :title="message.status === 1 ? '创建时间' : '阅读时间'">
          {{ formatTime(message) }}
        </div>
      </div>
      <div class="message-content-wrapper">
        <Typography.Paragraph
          :ellipsis="{
            rows: 2,
            showTooltip: false
          }"
          class="message-content"
        >
          {{ message.content }}
        </Typography.Paragraph>
      </div>
      <div v-if="isUnRead(message.status)" class="message-actions">
        <a-button @click="(e) => handleConfirm(e, Number(message.id))">确认</a-button>
      </div>
    </div>
    <!-- 任务弹窗 -->
    <TaskView
      v-if="taskPreviewVisiable"
      :visible="taskPreviewVisiable"
      :taskId="Number(taskPreviewId)"
      @update:visible="(val) => (taskPreviewVisiable = val)"
    />
    <!-- 需求弹窗 -->
    <RequirementView
      v-if="requirementPreviewVisiable"
      :visible="requirementPreviewVisiable"
      :requirementId="Number(requirementPreviewId)"
      @update:visible="(val: boolean) => (requirementPreviewVisiable = val)"
    />
  </div>
</template>

<style scoped>
.message-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: var(--color-bg-2);
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}

.message-left {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 100px;
}

.avatar-wrapper {
  position: relative;
  flex-shrink: 0;
}

.message-type {
  font-size: 12px;
  padding: 0 6px;
  border-radius: 8px;
  line-height: 18px;
}

.message-type.system {
  background-color: var(--color-primary-light-1);
  color: var(--color-primary-6);
}

.message-type.mention {
  background-color: var(--color-warning-light-2);
  color: var(--color-warning-6);
}

.message-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.message-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.message-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.message-time {
  color: var(--color-text-1);
  font-size: 14px;
  font-weight: 500;
  flex-shrink: 0;
  cursor: help; /* 添加提示鼠标样式 */
}

.message-category {
  color: var(--color-text-3);
  font-size: 13px;
  background-color: var(--color-fill-2);
  padding: 2px 8px;
  border-radius: 4px;
}

.unread-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgb(var(--danger-6));
}

.message-content-wrapper {
  background-color: var(--color-fill-1);
  border-radius: 4px;
  padding: 8px 12px;
}

.message-content {
  margin: 0;
  color: var(--color-text-2);
  font-size: 14px;
  line-height: 1.6;
}

:deep(.arco-typography) {
  margin-bottom: 0 !important;
}

.message-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.confirm-btn {
  padding: 2px 8px;
  border-radius: 2px;
  background-color: var(--color-primary-6);
  color: white;
  border: none;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.2s;
  line-height: 18px;
  z-index: 1;
}

.confirm-btn:hover {
  background-color: var(--color-primary-5);
}

.message-card:hover {
  background-color: var(--color-fill-2);
}

.sender-name {
  font-size: 14px;
  color: var(--color-text-1);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}
</style>
